<template>
	<view>
		<!-- 话题介绍 -->
		<topic-info :item="topicInfo"></topic-info>
		<!-- tabber 切换 -->
		<swiper-tab-head
		:tabBars="tabBars"
		:tabIndex="tabIndex"
		@changeIndex="tabtap"
		scrollItemStyle="width:50%;"
		scrollStyle="border-bottom: 0;">
		</swiper-tab-head>
		<!-- 列表 -->
		<view class="topic-detail-list">
			<block v-for="(item, index) in newList" :key="index">
				<template v-if="tabIndex==index">
					<!-- 列表 -->
					<block v-for="(list, listindex) in item.list" :key="listindex">
						<common-list @changeevent="updateData" :item="list" :index="listindex"></common-list>
					</block>
					<!-- 上拉加载 -->
					<load-more :loadText="item.loadText"></load-more>
				</template>
			</block>
		</view>
	</view>
</template>

<script>
	import topicInfo from '../../components/topic/topic-info.vue'
	import swiperTabHead from '../../components/index/swiper-tab-head.vue'
	import commonList from '../../components/common/common-list.vue'
	import loadMore from '../../components/common/load-more.vue'
	export default {
		data() {
			return {
				topicInfo: {
					id: 0,
					titlepic: '',
					title: '',
					desc: '',
					totlenum: 0,
					todaynum: 0
				},
				tabIndex: 0,
				tabBars: [
					{ name: '默认', id: 'moren' },
					{ name: '最新', id: 'zuixin' }
				],
				newList: [
					{
						loadText: '上拉加载更多',
						list: [],
						firstload: false,
						page: 1,
					},
					{
						loadText: '上拉加载更多',
						list: [],
						firstload: false,
						page: 1,
					},]
			}
		},
		components: {
			topicInfo,
			swiperTabHead,
			commonList,
			loadMore,
		},
		onReachBottom() { // 页面上拉触底事件
			this.loadMore()
		},
		onPullDownRefresh() { // 监听用户下拉刷新动作
			this.getList()
		},
		onLoad(e) {
			// #ifdef APP-PLUS
			this.__init(eval("("+e.detail+")"))
			// #endif
			// #ifdef MP-WEIXIN
			this.__init(JSON.parse(e.detail))
			// #endif
			// 开启监听
			uni.$on('updateData', this.updateData)
		},
		methods: {
			updateData(data) {
				switch(data.type) {
					case 'guanzhu':
					this.updateGuanZhu(data)
						break
					case 'support':
					this.updateSupport(data)
						break
				}
			},
			updateGuanZhu(data) { // 更新关注信息
				// 拿到对象
				this.newslist[this.tabIndex].list.forEach(item => {
					if(item.userid === data.userid) {
						item.isguanzhu = data.data
					}
				})
			},
			updateSupport(data) { // 更新顶数据状态
				let obj = this.newslist[this.tabIndex].list.find(item => {
					return item.id === data.post_id
				})
				if (!obj || obj.infonum.index === 1) return
				if (data.do == 'ding') {
					obj.infonum.index = 1
					obj.goodnum++
				}
			},
			__init(obj) { // 初始化
			  // 修改标题
				uni.setNavigationBarTitle({
					title: obj.title
				})
				this.topicInfo = obj
				// 获取列表数据
				this.getList()
			},
			async getList() { // 下拉刷新，获取数据
			let url = `/topic/${this.topicInfo.id}/post/${this.newList[this.tabIndex].page}`
			let [err, res] = await this.$http.get(url, {}, {token: true})
			// 错误处理
			if (!this.$http.errorCheck(err, res)) return this.newList[this.tabIndex].loadText = '上拉加载更多'
			let arr = []
			let list = res.data.data.list
			list.forEach(ele => {
				arr.push(this.__format(ele))
			})
			this.newList[this.tabIndex].list = this.newList[this.tabIndex].page > 1 ? this.newList[this.tabIndex].list.concat(arr) : arr
			this.newList[this.tabIndex].firstload = true
			return this.newList[this.tabIndex].loadText = (list.length < 10) ? '没有更多数据了' : '上拉加载更多'
			},
			__format(item) { // 格式转化
				return {
					userid: item.user.id,
					userpic: item.user.userpic,
					username: item.user.username,
					isguanzhu: !!item.user.fens.length,
					id: item.id,
					title: item.title,
					type:  'img', // img: 图文, video: 视频
					titlepic: item.titlepic,
					video: false,
					path: item.path,
					share: !!item.share,
					infonum: {
						index: (item.support.length>0) ? (item.support[0].type+1) : 0, // 0：没有操作；1：顶；2：踩；
						dingnum: item.ding_count,
						cainum: item.cai_count,
					},
					goodnum: item.ding_count,
					commentnum: item.comment_count,
					sharenum: item.sharenum,
					age: item.user.userinfo.age,
					sex: item.user.userinfo.sex,
				}
			},
			tabtap(index) { // 顶部滑块点击事件
				this.tabIndex = index
				this.newList[this.tabIndex].page = 1
				this.getList()
			},
			tabChange(e) { // 中间滑块滑动改变事件
				this.tabIndex = e.detail.current
			},
			loadMore() { // 上拉加载
				if (this.newList[this.tabIndex].loadText !== '上拉加载更多') return
				// 修改状态
				this.newList[this.tabIndex].loadText = '加载中...'
				// 获取数据
				this.newList[this.tabIndex].page++
				this.getList()
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>
